import React,{useState} from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
   // 状态 和 属性
    // constructor(){
    //   super();
    //   this.state = {
    //     // 私有属性
    //   }
    // }
    state = {name:"珠峰"}
    change1(n,m,e){
      // 共有属性
      console.log(e.target)
      console.log(n,m,e)
    } 
    change2 = ()=>{
      // 私有属性
    }
    change = ()=>{
      this.setState({
        name:666
      },function(){
        console.log(this.state.name)
      })
      console.log(this.state.name)
    }
    render() {
        console.log(this.props.className);
        console.log(this.state.name);
        return <div className=''>
          <h2>{this.state.name}</h2>
          <button onClick={this.change}>改变</button>
          <button onClick={this.change1.bind(this,100,200)}>传参</button>
          <button onClick={(e)=>{this.change1(100,200,e,300,400)}}>传参2</button>
        </div>;
    }
}
function App2(props){
  console.log(props)
  // react hooks是专门为了处理 函数式组建的state的及钩子函数的
  let [name,changeName] = useState("珠峰")// ["珠峰", ƒ]
  let [count,setCount] = useState(100)
  let [name1,changeName1] = useState("珠峰")
  let [name2,changeName2] = useState("珠峰")
  console.log(name)
  
  return <div className={props.className}>
    函数式组件{name}
    <button onClick={()=>{changeName(6868688)}}>改变</button>
  </div>
}
ReactDOM.render(<App2 className='qqqq'/>,document.getElementById('root'))